<template>
  <div class="time-page">
    <div>距离下班：</div>
    <div style="width: 96px; text-align: center">{{ time }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const time = ref('加载中')
const last = ref('17:30:00')
setInterval(() => {
  const date = window.$utils.dayjs(new Date()).format('YYYY-MM-DD')
  const now = window.$utils.dayjs()
  const end = window.$utils.dayjs(date + ' ' + last.value)
  function formatDuration(milliseconds) {
    const seconds = Math.floor((milliseconds / 1000) % 60)
    const minutes = Math.floor((milliseconds / (1000 * 60)) % 60)
    const hours = Math.floor(milliseconds / (1000 * 60 * 60))
    const paddedSeconds = String(seconds).padStart(2, '0')
    const paddedMinutes = String(minutes).padStart(2, '0')
    const paddedHours = String(hours).padStart(2, '0')
    return `${paddedHours}:${paddedMinutes}:${paddedSeconds}`
  }
  const duration = end.diff(now)
  if (duration > 0) {
    time.value = formatDuration(duration)
  } else {
    time.value = '下班吧，别卷了，你个吊毛'
  }
}, 1000)
</script>

<style scoped>
.time-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}
</style>
